<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title>查询</title>
  <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">
  <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">

</head>
<body style="padding:10px;">

<!-- 搜索页 ================================================== -->
    <div class="row" style="padding-right:10px;">
      <div class="span24" style="width:100%;">        
    
	     <div class="panel panel-success">
	          <div class="panel-header clearfix">
	            <h3 class="pull-left">查询</h3>
	             <div class="pull-right">
           			<button class="button button-success" onClick="javascript:window.location.href='../cdkey/addView';" >新增</button>
           		</div>
	          </div>
	          <div class="panel-body">
	     
	        
        <form id="searchForm" class="form-horizontal" tabindex="0" style="outline: none;">

          <div class="row">
            <div class="control-group">
               <label class="control-label">游戏名称:</label>
              <div class="controls ">
                <input type="text" name="name" class="control-text ">
              </div>
            </div>
            <div class="control-group ">
              <label class="control-label">状态:</label>
              <div class="controls ">
                  <select class="input-small " name="type">
                  	<option value="0">未使用</option>
                  	<option value="1">已使用</option>
                    <option value="2">全部</option>
                  </select>
              </div>
            </div>
         
          </div>

          <div class="row">
            <div class="control-group span10">
              <label class="control-label">&nbsp;</label>
              <div class="controls">
                <button id="btnSearch" type="submit" class="button button button-danger"><i class="icon-white icon-search"></i>&nbsp;搜索</button>
              </div>
            </div>
          </div>
        </form>
	          </div>
	        </div>
	        
	            
     <div class="panel panel-info">
          <div class="panel-header clearfix">
            <h3 class="pull-left">搜索结果</h3>
          </div>
          <div class="panel-body">
			      <div id="grid">
          </div>
        </div>
      </div>
    </div> 

        
 
    <script src="http://g.tbcdn.cn/fi/bui/jquery-1.8.1.min.js"></script>
    <script src="http://g.tbcdn.cn/fi/bui/bui-min.js?t=201309041336"></script> 
    <script type="text/javascript">
        var Grid = BUI.Grid,
          Store = BUI.Data.Store,
          columns = [
            { title: '游戏名称', width: 50, sortable: true, dataIndex: 'name'},
            { title: '激活码', width: 100, sortable: false, dataIndex: 'code'},
            { title: '剩余次数',width: 50,  sortable: false, elCls : 'center', dataIndex: 'viableSize'},
            { title: '已用次数',width: 50,  sortable: false, elCls : 'center', dataIndex: 'userSize'},
            { title: '使用时间',width: 80, sortable: true,  dataIndex: 'readTime'},
            { title: '备注',width: 100, sortable: true,  dataIndex: 'content'},
            { title: '发布时间',width: 100, sortable: true,  dataIndex: 'createTime'},
            { title: '操作',width: 40, sortable: true, renderer : function(value,obj){
              return '<input type="text" value="' + obj.id + '" style="display:none"/><a  href="#" class="grid-command btn-del"><i class="icon icon-trash"></i> 删除</a>'
            }}
          ];
 
        var store = new Store({
            url : '../cdkey/searchCodeKey',
            autoLoad:true,
            pageSize:10
          }),
          grid = new Grid.Grid({
            render:'#grid',
            loadMask: true,
            forceFit:true,
            columns : columns,
            store: store,
            // 顶部工具栏
            bbar : {
              pagingBar:true
            }
          });
 
        grid.render();
 
        //创建表单，表单中的日历，不需要单独初始化
        var form = new BUI.Form.HForm({
          srcNode : '#searchForm'
        }).render();
 
        form.on('beforesubmit',function(ev) {
          //序列化成对象
          var obj = form.serializeToObject();
          obj.start = 0; //返回第一页
          store.load(obj);
          return false;
        });
        //清除点击链接的默认事件
        grid.get('el').delegate('.grid-command','click',function(ev){
          ev.preventDefault();
        });
       //点击操作
        grid.on('itemclick',function(ev){
          var sender = $(ev.domTarget),
            itemEl = $(ev.element),
            item = ev.item;
 
          if(sender.hasClass('btn-del')){ //点击删除操作
            delFunction(item,itemEl);
          }
        });
        
          //删除选中的记录
        function delFunction(item,itemEl){
          BUI.Message.Confirm('确认删除记录？',function(){
           
            var input = itemEl.find('input'),id = input.attr('value');
			$.ajax({url:'../cdkey/delete?id='+id ,async:true});
            store.remove(item);
          },'question');
        }   
        
    </script>
<!-- script end -->
</body>
</html>